<template>
	<view class="container">
		<video
			id="videoContainer"
			autoplay
			class="video"
			:style="{ height: videoHeight }"
			@pause="videoPause"
			@play="videoPlay"
			@ended="videoEnded"
			:src="truePlaySrc"
			:controls="true"
			@timeupdate="timeupdate"
		>
			<cover-view class="cover-view" :style="{backgroundColor: theme.primary}" v-if="waitting">
				<cover-view class="text">开播倒计时</cover-view>
				<cover-view class="cutDownStr">{{ cutDownStr }}</cover-view>
			</cover-view>
		</video>
		<view class="course-name">{{courseName}}</view>
		<view class="list-area">
			<yxyl-album-item-list 
				:itemList="timeTableList" 
				:isLive="true" 
				:currentIndex="currentIndex" 
				:isPlaying="isPlaying" 
				@change="change">
			</yxyl-album-item-list>
		</view>
	</view>
</template>

<script>
import yxylAlbumItemList from '@/components/yxyl-album-tabs/yxyl-album-itemList.vue';
import { formatCutDownWithDay } from '@/util/dateUtil.js';
import { reportPlayTime } from '@/api/album.js';
export default {
	components: { yxylAlbumItemList },
	data() {
		return {
			theme: this.$theme,
			id: '',
			courseName: '',
			timeTableList: [],
			currentIndex: -1,
			isPlaying: false,
			waitting: false,
			setIntervalId: '',
			cutDownStr: '',
			truePlaySrc: '',
			reviewUrls: [],
			videoContext: null,
			costPoint:0,
			costTime:0,
			classId:'',
			// 上报次数
			index: 1
		}
	},
	onLoad(e) {
		this.videoContext = uni.createVideoContext('videoContainer');
		this.id = e.Id
		this.courseName = e.courseName
		this.getLivePlayList(this.id).then(() => {
			this.currentIndex = 0;
		})
	},
	onHide() {
		this.videoContext.pause();
		this.videoPause();
	},
	onUnload(){
		this.videoContext.pause();
		this.videoPause();
	},
	computed: {
		videoHeight: () => {
			const res = uni.getSystemInfoSync();
			return (res.windowWidth * 9) / 16 + 'px';
		}
	},
	watch: {
		currentIndex(value) {
			let currentId = this.timeTableList[value].id;
			this.getReviewList(currentId);
		}
	},
	methods: {
		getLivePlayList(id) {
			return this.$http
				.request({
					url: 'api/LivePlayer/GetLivePlayListById',
					data: {
						Id: id
					}
				})
				.then(res => {
					var that = this;
					uni.setNavigationBarTitle({
					　　title: res.courseName
					})
					res.timeTables.forEach(function(item, index) {
						that.timeTableList.push({
							isReview: item.classStatus == 3,
							itemTitle: item.title,
							id: item.id
						})
					})
				})
		},
		change(e) {
			this.currentIndex = e;
		},
		getReviewList(currentId) {
			var that = this;
			if (that.setIntervalId) clearInterval(that.setIntervalId);
			this.$http
				.request({
					url: 'api/LivePlayer/GetReviewList',
					data: {
						Id: currentId
					}
				})
				.then(res => {
					this.waitting = res.waitting;
					if (this.waitting) {
						this.clearPlayInfo();
						var date = new Date(res.onDateTime);
						//var date=new Date("2020-03-28 17:17:40");
						that.setIntervalId = setInterval(function() {
							that.cutDownStr = formatCutDownWithDay(date);
							if (that.cutDownStr == '00秒' || !that.cutDownStr) {
								// that.cutDownStr = '';
								// that.waitting = false;
								clearInterval(that.setIntervalId);
								uni.redirectTo({
									url: './video?Id=' + currentId
								});
							}
						}, 1000);
					} else if (res.isLive) {
						uni.redirectTo({
							url: './video?Id=' + currentId
						});
					} else {
						this.reviewUrls = res.reviewUrls;
						this.costTime=res.costTime;
						this.classId=res.classId;
						this.handlerSrc();
					}
				})
				.catch(() => {
					that.cutDownStr = '';
					that.waitting = false;
					this.clearPlayInfo();
					setTimeout(() => {
						this.currentIndex = 0;
					}, 1500);
				});
		},
		handlerSrc(index) {
			if (!this.reviewUrls)
				uni.showToast({
					icon: 'none',
					title: '本节课暂不支持回放'
				});
			else {
				index = index || 0;
				if (index >= this.reviewUrls.length) index = 0;
				this.truePlaySrc = this.reviewUrls[index];
			}
		},
		clearPlayInfo() {
			this.reviewUrls = [];
			this.truePlaySrc = null;
			this.videoContext.stop();
			this.videoPause();
		},
		videoPause() {
			this.isPlaying = false;
		},
		videoPlay() {
			this.isPlaying = true;
		},
		videoEnded() {		
			var index = this.reviewUrls.indexOf(this.truePlaySrc);		
			if (index < this.reviewUrls.length - 1) {			
				this.truePlaySrc = this.reviewUrls[index + 1];				
			} else {
				if (this.currentIndex < this.timeTableList.length) this.currentIndex++;
				else ths.currentIndex = 0;
			}
		},
		timeupdate(e){
			if((e.detail.currentTime>parseInt(this.costPoint*this.costTime*60)))
			{								
				this.costPoint=parseInt(parseInt(e.detail.currentTime)/(this.costTime*60))+1;
				reportPlayTime(this.index, this.classId,this.timeTableList[this.currentIndex].id,this.costTime,4);
				this.index++
			}						
		},
	}
};
</script>

<style lang="scss" scoped>
.video {
	width: 100%;
}
.course-name {
	width: 100%;
	margin: 0 auto;
	padding: 5rpx 0;
	height: 50rpx;
	.text {
		width: 90%;
		margin: 0 auto;
	}
}
.cover-view {
	width: 100%;
	height: 100%;
	color: #f8f8f8;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	.text {
		font-size: 35rpx;
		color: #b3423e;
		padding-bottom: 10rpx;
	}
	.cutDownStr{
		width: 100%;
		display: flex;
		justify-content: center;
		text-align: center;
	}
}
.course-name{
	padding: 5rpx 10rpx;
	font-size: 28rpx;
	font-weight: bold;
	border-bottom: 1rpx solid #e2e2e2;
}
.list-area{
	height: 60vh;
}
</style>
